<template>
  <div>
    <van-button size="small" class="leftfloat" type="default" @click="closeMap">关闭</van-button>
    <van-button size="small" class="rightfloat" type="info" @click="sure">确认</van-button>
    <div class="amap-page-container">
      <el-amap
        vid="amapDemo"
        ref="map"
        :center="center"
        :zoom="zoom"
        :events="events"
      ></el-amap>
    </div>
    <input id='tipinput' v-model="inputvalue" @input="onInputdone()"/>
    <div id="panel"></div>
  </div>
</template>
<script>
var placeSearch
var cpoint
module.exports = {
  data () {
    let self = this
    return {
      zoom: 12,
      center: [116.413449, 40.050802],
      inputvalue: '',
      flag: '',
      mapaddressposition: '',
      sval: this.$route.params.sval,
      svalmap: this.$route.params.svalmap,
      mapInstance: this.$route.params.mapInstance,
      isPosi: this.$route.params.isPosi,
      events: {
        init: (o) => {
          //console.log(o.getCenter())
          //console.log(this.$refs.map.$$getInstance())
          AMap.plugin('AMap.Geolocation', function () {
            var geolocation = new AMap.Geolocation({
              enableHighAccuracy: true,
              timeout: 10000,
              buttonPosition: 'RB',
              buttonOffset: new AMap.Pixel(10, 20),
              zoomToAccuracy: true
            })
            o.addControl(geolocation)
            geolocation.getCurrentPosition(function (status, result) {
              if (status === 'complete') {
                o.center = result.position
                cpoint = result.position
                //console.log(result.position + '-------')
                //console.log(self.inputvalue + '-------')
                //console.log(self.sval + '++++++++++')
                placeSearch.searchNearBy(self.inputvalue, cpoint, 200, function (status, result) {

                })
                self.mapaddressposition = result.formattedAddress + '&' + result.position
                AMap.event.addListener(placeSearch, 'listElementClick', function (e) {
                  self.mapaddressposition = e.data.address + '&' + e.data.location
                })
              } else {
                alert(JSON.stringify(result))
                //console.log(result)
              }
            })
          })
          AMap.service(['AMap.PlaceSearch'], function () {
            // 构造地点查询类
            placeSearch = new AMap.PlaceSearch({
              pageSize: 8, // 单页显示结果条数
              pageIndex: 1, // 页码
              map: o, // 展现结果的地图实例
              panel: 'panel', // 结果列表将在此容器中进行展示。
              autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
              input: 'tipinput'
            })
          })
        }
      }
    }
  },
  methods: {
    onInputdone () {
      //console.log(this.inputvalue)
      placeSearch.searchNearBy(this.inputvalue, cpoint, 200, function (status, result) {

      })
    },
    closeMap () {
      //console.log(this.flag + '关了')
      this.$router.go(-1)
    },
    sure () {
      // 回写
      // this.$toast(item.id + '-->' + item.title)
      this.flag = '回写'
      this.$router.go(-1)
    },
    change (t) {
      if (t < 10) {
        return '0' + t
      } else {
        return t
      }
    },
    currenttime () {
      let d = new Date()
      let year = d.getFullYear()
      let month = this.change(d.getMonth() + 1)
      let day = this.change(d.getDate())
      let hour = this.change(d.getHours())
      let minute = this.change(d.getMinutes())
      let second = this.change(d.getSeconds())
      let time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
      return time
    }
  },
  beforeRouteLeave (to, from, next) {
    if (to.name === 'new' || to.name === 'edit' || to.name === 'qiandaonew') {
      if (this.flag) {
        for (let groupindex in this.sval) {
          for (let itemindex in this.sval[groupindex].groupvalue) {
            let item = this.sval[groupindex].groupvalue[itemindex]
            if (item.sField === this.svalmap.sField) {
              //console.log(item.value + 'map')
              alert('位置:' + this.mapaddressposition.split('&')[0])
              item.value = this.mapaddressposition
              this.isPosi = false
            } else if (item.sField === 'dbegin' && this.svalmap.sField === 'baddress') {
              item.value = this.currenttime()
            } else if (item.sField === 'dend' && this.svalmap.sField === 'eaddress') {
              item.value = this.currenttime()
            }
          }
        }
      }
    }
    next()
  }
}
</script>
<style>
.amap-page-container {
  height: 50vh;
  width: 100vw;
}
#panel {
  min-height: 10vh;
  max-height: 45vh;
  overflow: auto;
}
#tipinput {
  background-image: url(https://a.amap.com/jsapi_demos/static/image/search.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 16px;
    font-family: inherit;
    display: block;
    width: 100%;
    height: 2.4rem;
    padding: .5rem;
    margin-bottom: -9px;
    border: 1px solid #E1E1E2;
    font-size: .875rem;
    border-radius: 1px;
    box-sizing: border-box;
    margin-bottom: 5px;
}
.leftfloat {
  position:absolute;
  left: 1vw;
  top: 1vh;
  z-index: 99;
}
.rightfloat {
  position:absolute;
  right: 1vw;
  top: 1vh;
  z-index: 99;
}
</style>
